<template>
  <div class="content">
    <el-form
      :model="baseInfo"
      ref="formRef"
      label-width="160px"
      class="form__content"
    >
        <el-form-item label="物资申报人：">
          {{ baseInfo.createUserName }}
        </el-form-item>
        <el-form-item label="物资申报单位：">
          {{ baseInfo.companyName }}
        </el-form-item>
        <el-form-item label="出入类型：">
          {{ baseInfo.accessType === 'EXIT_MATERIAL' ? '物资出厂' : '空车出厂' }}
        </el-form-item>
        <el-form-item label="建设单位：">
          {{ baseInfo.factoryName }}
        </el-form-item>
        <el-form-item label="归属项目：">
          {{ baseInfo.projectName }}
        </el-form-item>
        <el-form-item label="归属合同：">
          {{ baseInfo.projectSectionName }}
        </el-form-item>
        <el-form-item label="车牌号：">
          {{ (baseInfo.licensePlates || []).join(' ') }}
        </el-form-item>
        <el-form-item label="出场时间：">
          {{ baseInfo.entryExitTime }}
        </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, watch, ref } from "vue";

const props = defineProps({
  basicInfoData: {
    type: Object,
    default: () => {}
  }
});

let baseInfo = ref(null);

watch(
  () => props.basicInfoData,
  newVal => {
    if (newVal) {
      baseInfo.value = newVal;
    }
  },
  {
    deep: true,
    immediate: true
  }
);
</script>

<style lang="scss" scoped>
.divider {
  margin-bottom: 10px;
  // border-left: 3px solid #409eff;
  text-indent: 8px;
}
.content {
  width: 100%;
  margin-bottom: 20px;
}

:deep .el-select {
  width: 100%;
}
:deep .el-date-editor {
  width: 100%;
}
</style>
